<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Row from "./Row.svelte";
    import { Col } from "../Col";
    import { fn } from "storybook/test";
    import { Space } from "../Space";

    const { Story } = defineMeta({
        title: "Components/Layout/Grid",
        component: Row,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

{#snippet colText(text: string, style?: string)}
    <div class="col-content" style={"justify-content: center; " + style}>{text}</div>
{/snippet}

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v" size={5}>
            <Row class="demo-row">
                <Col class="demo-col">{@render colText("100%")}</Col>
            </Row>
            <Row class="demo-row light">
                <Col class="demo-col" grid={0.5}>{@render colText("50%")}</Col>
                <Col class="demo-col light" grid={0.5}>{@render colText("50%")}</Col>
            </Row>
            <Row class="demo-row">
                <Col class="demo-col" grid={1 / 3}>{@render colText("1/3")}</Col>
                <Col class="demo-col light" grid={1 / 3}>{@render colText("1/3")}</Col>
                <Col class="demo-col" grid={1 / 3}>{@render colText("1/3")}</Col>
            </Row>
            <Row class="demo-row light">
                <Col class="demo-col" grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col class="demo-col light" grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col class="demo-col" grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col class="demo-col light" grid={1 / 4}>{@render colText("1/4")}</Col>
            </Row>
            <Row class="demo-row">
                <Col class="demo-col" grid={2 / 3}>{@render colText("2/3")}</Col>
                <Col class="demo-col light" grid={1 / 3}>{@render colText("1/3")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>

<Story name="Gutter">
    {#snippet template(args)}
        <Space dir="v">
            <Row gutter={16} class="example-demo">
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
            </Row>
            <div>row2</div>
            <Row gutter={[16, 16]} class="example-demo">
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
                <Col grid={1 / 4}>{@render colText("1/4")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>

<Story name="Push/Pull">
    {#snippet template(args)}
        <Row class="example-demo">
            <Col grid={3 / 4} push={1 / 4}>{@render colText("3/4 push-1/4")}</Col>
            <Col grid={1 / 4} pull={3 / 4}>{@render colText("1/4 pull-3/4")}</Col>
        </Row>
    {/snippet}
</Story>

<Story name="Flex Align">
    {#snippet template(args)}
        <Space dir="v" size={5} style="margin-top: 20px">
            <Row justify="center" align="top" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6", "height: 80px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6", "height: 100px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <Row justify="center" align="bottom" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6", "height: 80px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6", "height: 100px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <Row justify="center" align="middle" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6", "height: 80px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6", "height: 100px")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>

<Story name="Offset">
    {#snippet template(args)}
        <Space dir="v">
            <Row gutter={16} class="example-demo">
                <Col grid={1 / 4} offset={1 / 4}>{@render colText("1/4 offset 1/4")}</Col>
                <Col grid={1 / 4} offset={1 / 4}>{@render colText("1/4 offset 1/4")}</Col>
            </Row>

            <Row gutter={16} class="example-demo">
                <Col grid={0.5} offset={0.25}>{@render colText("0.5 offset 0.25")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>

<Story name="FlexJustify">
    {#snippet template(args)}
        <Space dir="v" size={5} style="margin-top: 20px">
            <div>start</div>
            <Row justify="start" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <div>end</div>
            <Row justify="end" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <div>center</div>
            <Row justify="center" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <div>space-between</div>
            <Row justify="space-between" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
            <div>space-around</div>
            <Row justify="space-around" class="example-demo">
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
                <Col grid={1 / 6}>{@render colText("1/6")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>

<Story name="Response">
    {#snippet template(args)}
        <Space dir="v" size={5} style="margin-top: 20px">
            <div>width, offset</div>
            <Row class="example-demo" gutter={16}>
                <Col xs={{ grid: 1 / 6, offset: 1 / 24 }} lg={{ grid: 0.25, offset: 1 / 12 }}>{@render colText("", "height: 80px")}</Col>
                <Col xs={{ grid: 5 / 12, offset: 1 / 12 }} lg={{ grid: 0.25, offset: 1 / 12 }}>{@render colText("", "height: 80px")}</Col>
                <Col xs={{ grid: 1 / 6, offset: 1 / 12 }} lg={{ grid: 0.25, offset: 1 / 12 }}>{@render colText("", "height: 80px")}</Col>
            </Row>
            <div>gutter</div>
            <Row class="example-demo" gutter={{ xs: [8, 8], lg: [32, 32] }}>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
                <Col grid={1 / 3}>{@render colText("", "height: 80px")}</Col>
            </Row>
        </Space>
    {/snippet}
</Story>
